const template_floor_style_2 = `
<div>
    <div class="floor-style-2">
        <!-- 楼层标题 -->
        <floor-title :title='title.index' :subTitle='title.text' :link='titleLink' :imgShow='false' @change="handleTitleChanged"></floor-title>

        <!-- 楼层内容区 -->
        <div class="floor-content">
        <div class="floor-right">
            <div class="floor-right-top">
                <div class="top-first">
                    <narrow-image :image="images.left_top_left_images" @change="handleTopLeftImageChange" :style-object=" { width: '217px', height: '290px' }" />
                </div>
                <div class="top-second">
                    <narrow-image :image="images.left_top_right_images" @change="handleTopRightImageChange" :style-object=" { width: '391px', height: '290px' }" />
                </div>
            </div>
            <div class="floor-right-bottom">
                <div class="bottom-first">
                    <narrow-image :image="images.left_bottom_left_images" @change="handleBottomLeftImageChange" :style-object=" { width: '217px', height: '178px' }" />
                </div>
                <div class="bottom-second">
                    <narrow-image :image="images.left_bottom_right_images" @change="handleBottomRightImageChange" :style-object=" { width: '391px', height: '178px' }" />
                </div>
            </div>
        </div>
        <div class="floor-left" @click="setSelectCargos">
            <cargo-item :sku-id="item.sku_id" v-for="item in links.cargos" :key="item.sku_id" class="item" />
            <cargo-item :sku-id="0" v-for="item in 6" :key="item" class="item" v-if="!links.cargos.length" />
        </div>
      </div>
    </div>

    <!-- 页面弹出框 -->
    <div>
        <goods-searcher :visible="dialogVisible.cargos" @visible-change="handleGoodsSearchVisibleChange" @change="handleSelectedGoodsChange" />
    </div>
</div>
`

Vue.component('floor_style_2', {
    props: {
        config: {
            type: Object,
            required: true,
        },
    },
    data: function () {
        return {
            dialogVisible: { cargos: false },
            title: {
                index: '2F',
                text: 'NiuShop',
            },
            images: {
                left_top_left_images: {},
                left_top_right_images: {},
                left_bottom_left_images: {},
                left_bottom_right_images: {},
            },
            links: {
                cargos: [],
            },
            titleLink: {
                url: '',
                content: '查看更多',
            },
        }
    },
    mounted() {},
    methods: {
        setSelectCargos() {
            this.dialogVisible.cargos = true
        },
        handleTopLeftImageChange(left_top_left_images) {
            this.images.left_top_left_images = left_top_left_images
            return this.onConfigChanged()
        },
        handleTopRightImageChange(left_top_right_images) {
            this.images.left_top_right_images = left_top_right_images
            console.log(this.images.left_top_right_images)
            return this.onConfigChanged()
        },
        handleBottomLeftImageChange(left_bottom_left_images) {
            this.images.left_bottom_left_images = left_bottom_left_images
            return this.onConfigChanged()
        },
        handleBottomRightImageChange(left_bottom_right_images) {
            this.images.left_bottom_right_images = left_bottom_right_images
            return this.onConfigChanged()
        },
        handleSelectedGoodsChange(goods) {
            this.links.cargos = goods.map(item => {
                return { sku_id: item.sku_id }
            })

            return this.onConfigChanged()
        },
        handleGoodsSearchVisibleChange(visible) {
            this.dialogVisible.cargos = visible
        },
        handleTitleChanged(ojb) {
            const { title, subTitle, link } = ojb
            this.title.index = title
            this.title.text = subTitle
            this.titleLink = link
            this.onConfigChanged()
        },
        // 配置修改设置
        onConfigChanged() {
            const settings = {
                index: this.title.index,
                title: this.title.text,
                left_top_left_images: this.images.left_top_left_images,
                left_top_right_images: this.images.left_top_right_images,
                left_bottom_left_images: this.images.left_bottom_left_images,
                left_bottom_right_images: this.images.left_bottom_right_images,
                rightCargos: [],
                titleLink: this.titleLink,
            }

            if (this.links.cargos && this.links.cargos.length > 0) {
                settings.rightCargos = this.links.cargos.map(item => {
                    return { sku_id: item.sku_id }
                })
            }

            this.$emit('config-change', settings)
        },
    },
    watch: {
        config: function (curr) {
            this.images.left_top_left_images = curr.left_top_left_images || {}
            this.images.left_top_right_images = curr.left_top_right_images || {}
            this.images.left_bottom_left_images = curr.left_bottom_left_images || {}
            this.images.left_bottom_right_images = curr.left_bottom_right_images || {}

            this.links.cargos = curr.rightCargos || []
            this.links.cargos = this.links.cargos.map(item => {
                return { sku_id: item.sku_id }
            })

            this.titleLink = curr.titleLink || {}
            this.title.index = curr.index
            this.title.text = curr.title
        },
    },
    template: template_floor_style_2,
})
